<template>
	<view v-if="isshow">
		<!-- <view @touchmove.stop.prevent v-if="focus" style="position: fixed; z-index: 999;  width: 750rpx; background-color: rgba(51, 51, 51, 0.5);top: 0;"
			:style="'height:'+(swiperheight*2+20)+'rpx'" @click="hide"></view>
		<view v-if="istran" class="tsend" :style="{bottom: focus?'199upx':'160upx'}">
			<view class="tsend-text">转发并评论 // @{{username}}</view>
			<view class="closebtn" @click="closetran"><i class="iconfont icon-hao"></i></view>
		</view> -->

		<view class="inputsend" :style="{bottom:inputOffsetBottom+'px'}">
			<view class="input">
				<view class="inputleft">
					<input class="inputsr"  :adjust-position="false" ref="input" v-model="msg" :focus="focus" name="msg" :auto-focus="isSendFocus" :placeholder="placeholder" />
				</view>
				<view><i style="width:36rpx;height: 36rpx;font-size: 36rpx;color: #C0C4CC;" class="iconfont iconbiaoqing1"></i></view>
			</view>
			<text class="sendbtn" @click="sendmsg">发送</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputOffsetBottom: 0,
				swiperheight: 0,
				msg: '',
				focus: false,
			}
		},
		props: {
			placeholder: String,
			isshow: Boolean,
			istran: Boolean,
			username: String,
			isSendFocus: {
				type: Boolean,
				default: false
			}
		},
		created() {
			uni.onKeyboardHeightChange(res => {
					this.inputOffsetBottom = res.height
					console.log(this.inputOffsetBottom,"=======");
					if (res.height === 0) {
						this.focus = false
					} else {
						this.focus = true;
					}
				}),
				uni.getSystemInfo({
					success: (res) => {
						let height = res.windowHeight - uni.upx2px(100) //获取系统信息，可使用窗口的高度
						this.swiperheight = height;
					}
				});
		},
		methods: {
			setfocus:function(){
				this.focus =true;
			},
			/* 取消 */
			hide: function() {
				uni.hideKeyboard()
			},
			/* 发送消息 */
			sendmsg: function() {
				uni.hideKeyboard()
				this.$emit('sendmsg', {
					msg: this.msg
				})
				this.msg = '';
			},
			closetran: function() {
				this.$emit('closetran');
			}
		}

	}
</script>


<style lang="scss" scoped>
	.tsend {
		width: 100%;
		height: 80upx;
		border-radius: 10upx 10upx 0px 0px;
		background-color: #FFFFFF;
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;

		.tsend-text {
			color: #999999;
			font-size: 30upx;
			margin-left: 30upx;

		}

		.closebtn {
			width: 40rpx;
			height: 40rpx;
			background-color: #F4F7FC;
			border-radius: 50%;
			font-size: 26rpx;
			text-align: center;
			line-height: 40rpx;
			margin-right: 20upx;
			color: #DCDFE6;
			transform: rotate(45deg);

		}
	}


	.inputsend {
		width: 750rpx;
		height: 160rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		z-index: 999;
		bottom: 0;
		background-color: #FFFFFF;

	}

	.input {
		width: 540rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FAFAFA;
		border-radius: 12rpx;
		padding-left: 20rpx;

	}

	.inputleft {
		width: 460rpx;
	}

	.inputsr {
		font-size: 30rpx;
	}

	.sendbtn {
		background: #00D5A2;
		border-radius: 40rpx;
		width: 120rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 30upx;
		color: #FFFFFF;
		margin-left: 30upx;
	}
</style>
